<template>
  <template v-if="visible">
   <Teleport to="body">
      <div class="vue-dialog-overlay" @click="closeOnClickOverlay"></div>
    <div class="vue-dialog-wrapper">
      <div class="vue-dialog">
        <header>
          <slot name="title"/>
          <p @click="close">X</p>
        </header>
        <main>
          <slot name="content"></slot>
        </main>
        <footer>
          <Button theme="primary" @click="ok">OK</Button>
          <Button @click="Cancel">Cancel</Button>
        </footer>
      </div>
    </div>
   </Teleport>
  </template>
</template>
<script>
import Button from "./Button.vue";
export default {
  components: { Button },
  props: {
    // title: {
    //   type: String,
    //   default: "提示",
    // },
    visible: {
      type: Boolean,
      default: false,
    },
    closeOnClickOverlay: {
      type: Boolean,
      default: true,
    },
    ok: {
      type: Function,
    },
    cancel: {
      type: Function,
    },
  },
  setup(props, context) {
    const close = () => {
      context.emit("update:visible", false);
    };
    const closeOnClickOverlay = () => {
      if (props.closeOnClickOverlay) {
        close();
      }
    };
    const ok = () => {
      if(props.ok&&props.ok()!==false){
        close()
      }
      // if (props.ok?.() !== false) {
      //   close();
      // }
    };
    const Cancel = () => {
      if (props.cancel&&props.cancel() !== false) {
        close();
      }
    };
    return { close, closeOnClickOverlay, ok, Cancel };
  },
};
</script>
<style lang="scss">
.vue-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 4000;
  overflow-y: hidden;
}
.vue-dialog-wrapper {
  position: absolute;
  z-index: 5000;
  width: 40vw;
  height: 30vh;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 5px 1px #ddd;
  border-radius: 4px;
  .vue-dialog {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    header {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 1rem;
      p {
        cursor: pointer;
        width: 1.5rem;
        text-align: center;
      }
    }
    main {
      border-top: 1px solid #f5f5f5;
      border-bottom: 1px solid #f5f5f5;
      flex: 3;
      padding: 10px 15px;
    }
    footer {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      button {
        margin-right: 1rem;
      }
    }
  }
}
@media (max-width:500px){
  .vue-dialog-wrapper{
    width: 90vw;
  }
}
</style>